import React from 'react';
import {HashRouter as Router, Route, Link, Switch} from 'react-router-dom';
import Main from './index';

export default class IRouter extends React.Component {
  render() {
    return (
      <Router>
        <Main>
          {/*
              没有 Switch 每个路由都会匹配到 NoMatch
              使用 exact 精准匹配，二级路由不会被匹配到
            */}
          <Switch>
            {/*<Route path='/' component={Home}/>*/}
            <Route path='/home' render={() => (
              <Home>
                <Route path='/home/:homeId' component={Info}/>
              </Home>
            )}/>
            <Route exact path='/about' component={About}/>
            <Route path="/about/a" component={AboutA}/>
            <Route component={NoMatch}/>
          </Switch>
        </Main>
      </Router>
    )
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        <h2>Home Content</h2>
        <Link to='/home/a'>嵌套路由</Link>
        <br/>
        <Link to='/home/456'>动态路由</Link>
        <hr/>

        {this.props.children}
      </div>
    )
  }
}

/**
 * 多个参数
 *    http://localhost:3000/#/home/456&123
 *    Route.path: /home:homeId&id
 *    { homeId: 456, id: 123 }
 */
class Info extends React.Component {
  render() {
    console.log('路由 Props：\n', this.props);
    return (
      <div>
        {/*{"path":"/home/:homeId","url":"/home/456","isExact":true,"params":{"homeId":"456"}}*/}
        <h3>动态路由的值：{JSON.stringify(this.props.match.params.homeId)}</h3>
      </div>
    )
  }
}

// function Info (props) {
//   console.log('路由 Props: ', props);
//   return (
//     <div>
//       <h3>动态路由的值：{ props.match.params.homeId }</h3>
//     </div>
//   )
// }

function NoMatch() {
  return (
    <div>
      <h3>404 page</h3>
    </div>
  )
}

// function Home() {
//   return (
//     <div>
//       <h2>Home Content</h2>
//       <hr/>
//       {this.props.children}
//     </div>
//   )
// }

function About() {
  return (
    <div>
      <h2>About Content</h2>
    </div>
  )
}

function AboutA() {
  return (
    <div><h2>AboutA Content</h2></div>
  )
}
